<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">

		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../../cssmui/mui.min.css">
		<link href="../../cssmui/mui.picker.min.css" rel="stylesheet" />
		<script src='../../mui/mui.min.js'></script>
		<script src="../../mui/mui.picker.min.js"></script>
		<script src="../../js/app.js"></script>
		<script src='../../js/jsondb.js'></script>
		<script src='../../js/map/mydict.js'></script>	
		<script src="../../js/loadpicker.js"></script>
		<script src="../../js/map/ioservices.js"></script>
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			
			p {
				text-indent: 3px;
				/*缩进*/
			}
			
			span.mui-icon {
				font-size: 14px;
				color: #007aff;
				margin-left: -15px;
				padding-right: 10px;
			}
			
			.mui-off-canvas-right {
				color: #fff;
			}
			
			.title {
				margin: 35px 15px 10px;
			}
			
			.title+.content {
				margin: 10px 15px 35px;
				color: #bbb;
				text-indent: 1em;
				font-size: 14px;
				line-height: 24px;
			}
			
			input {
				color: #000;
			}
			
			.mui-table-view-cell {
				padding: 10px 10px;
			}
			
			.list-img {
				margin-right: 8px;
				width: 80px;
				height: 84px;
			}
			
			.list-row {
				height: 100px;
			}
			
			.list-row-selected {
				background-color: lemonchiffon;
			}
			
			.mui-bar-popover {
				width: 10%;
			}
			
			.mui-popover {
				width: 340px;
				height: 250px;
			}
		</style>
	</head>

	<body>
		<!--侧滑菜单容器-->
		<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable mui-slide-in">
			<!--菜单部分-->
			<aside id="offCanvasSide" class="mui-off-canvas-right">
				<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
					<div class="mui-scroll">

						<h4 style="margin: 10px;">搜索条件</h4>
						<hr>
						<form>
							<div style="margin: 10px;">
								<input type="text" name="gclass" id="gclass" value="" placeholder="分类" />
								<input type="text" name="gname" id="gname" value="" placeholder="名称" />
								<br>
								<span id="offCanvasHide" style="margin-right:10px" class="mui-btn mui-btn-blue mui-pull-left">关闭</span>
								<span id="searchsubmit" style="margin-right:10px" class="mui-btn mui-btn-blue mui-pull-right">查找</span>
							</div>
						</form>
					</div>
				</div>
			</aside>
			<div class="mui-inner-wrap">
				<header class="mui-bar mui-bar-nav">
					<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>

					<span id="offCanvasShow" href="#" class="mui-icon mui-icon-bars mui-pull-right" style="margin-right:5px"></span>
					<h1 class="mui-title">盘点</h1>
				</header>
				<div id="offCanvasContentScroll" style="margin-bottom:50px" class="mui-content mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul id="mylist" class="mui-table-view mylist ">

						</ul>
					</div>
				</div>
				<nav class="mui-bar mui-bar-tab">

					<a class="mui-tab-item" href="scan">
						<span class="mui-tab-label">扫描</span>
					</a>

				</nav>

				<!-- off-canvas backdrop -->
				<div class="mui-off-canvas-backdrop"></div>
			</div>
		</div>
		<div id="editPopover" class="mui-popover mui-popover-bottom">
			<div>

				<form class="mui-input-group ">
					<div style="background-color:beige; ">
						<input id="gid" type="hidden">
						<div class="mui-input-row ">
							<label>原数量：</label>
							<input type="number" readonly id="oldnum" value="0.0">
						</div>
						<div class="mui-input-row ">
							<label>实际数量：</label>
							<div class="mui-numbox" style="width: 180px;height: 35px;">
								<button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
								<input id="num" class="mui-input-numbox" id="num" type="number" />
								<button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
							</div>
						</div>
						<div class="mui-input-range ">
							<select id="pors">
								<option value="cl1">遗失</option>
								<option value="co1">找回</option>
								<option value="cl1">借出</option>
								<option value="co1">归还</option>
								<option value="cl1">破损</option>
								<option value="co1">索赔</option>
							</select>
							<textarea id="remark" rows="2" placeholder="备注"></textarea>
						</div>
						<div class="mui-input-row pamountdiv1">
							<button id="editbtn">确认</button>
						</div>
					</div>
				</form>

			</div>

		</div>
		<script src="../../js/myoffcanvas.js"></script>
		<script>
			var _queryRS = null;
			var DICT_gclass = null;
			var _tb_checknum = null
			var _opentype = ''; //工作模式 sel 表示选择模式
			var targetTab = ['', "check_itemp.html", '../../plus/barcode_scan.html']
			var _tb_goods = null;
		
			mui.init();
			mui.ready(function() {

				that = this;

				var _flag = 0;
				G('offCanvasContentScroll').addEventListener('scrollend', function(e) {
					//console.log(_flag + ' ' + e.detail.y + '  ' + e.detail.maxScrollY)
					_flag = 0;
					if(e.detail.y <= e.detail.maxScrollY) {
						_flag = 1
					}
				});

				G('offCanvasHide').addEventListener('tap', function() {
					offCanvasWrapper.offCanvas('close');
					document.activeElement.blur();
				});

				G('searchsubmit').addEventListener('tap', function(e) {
					//console.log(_flag + ' ' + e.detail.y + '  ' + e.detail.maxScrollY)
					document.activeElement.blur();
					refresh();
					offCanvasWrapper.offCanvas('close');
				});
				mui("nav").on("tap", ".mui-tab-item", function() {
					var eventname = this.getAttribute("href")
					if(eventname == "scan") {
						open(targetTab[2]);
					}
				});
			});
			mui(".mui-table-view").on("tap", ".mui-table-view-cell", function() {
				console.log('this.offsetTop:'+this.offsetTop);
				//名称不能与关键属性 url id extras createNew 有相同	
				//从菜单或首页进入//目的是为了编辑修改
				mui('#editPopover').popover('show', this);
				G('editPopover')['offtop'] = this.offsetTop;
				//var oldnum=round2(G('oldnum').value, 0);
				//console.log(this.oldnum+'xxx');
				if(this.oldnum < 0) {
					mui.alert("负库存的商品，无法盘点");
					mui('#editPopover').popover('hide');
					return;
				} //如果差异为0 退出

				G('gid').value = this.did;
				G('num').value = G('oldnum').value = this.oldnum;
				//G('remark').value='';
				//G('num').value=G('oldnum').value;
			});
			mui(".mui-popover").on("tap", "#editbtn", function() {
				// console.log('this.did:'+this.did)
				//名称不能与关键属性 url id extras createNew 有相同	
				//从菜单或首页进入//目的是为了编辑修改
				save();

				//var clienth=document.documentElement.clientHeight || document.body.clientHeight-120;
				var scroll = mui('#offCanvasContentScroll').scroll()
				//重新计算布局值，最大滚动的高度等等
				//console.log(clienth)
				scroll.reLayout();
				//滚动到底部
				var opp = G('editPopover')['offtop']
				//console.log(opp)
				//scroll.scrollTo(0, 300 - opp);
				//scroll.scrollToBottom(100);
			});

			function save(top) {

				//获取数据
				var data = {};
				data.oldnum = round2(G('oldnum').value, 0);
				data.num = round2(G('num').value, 0);
				data.dvalue = data.num - data.oldnum; //如果 正表示增加,如果负表示减少
				if(data.dvalue == 0) return; //如果差异为0 退出
				if(data.num < 0) {
					mui.alert("实际盘点的库存数量不能为负");
					return;
				} //如果差异为0 退出

				data.pors = G('pors').value;
				var te = G('pors').options[G('pors').selectedIndex].text;
				data.remark = te + G('remark').value;
				data.gid = G('gid').value;
				data.sdate = new Date().Format();
				data.price = _IOM.getGoodPrice(data.gid, '1');
				//必须填
				_tb_checknum.setObj(data);

				var store = {}
				store.gid = data.gid;
				store.price = data.price;
				if(data.dvalue > 0) //溢出
				{
					store.num = data.dvalue;
					store.pors = 'co1';
				} else //损失
				{
					store.num = 0 - data.dvalue;
					store.pors = 'cl1';
				}
				store.lose = data.price * store.num;
				_IOM.checknum(store);
				refresh();
				mui('#editPopover').popover('hide');

				//新增保存红冲单					
				//保存明细					
				//提交库存红冲单					
			}

			function loaddict() {
				var tbtyps = new XCDBHelp('tb_types')
				var obj = tbtyps.getObjByID('gclass')
				//log(obj)
				if(obj == null) return;
				DICT_gclass = obj._data;
				loadPicker('gclass', DICT_gclass);
			}

			function pullRefresh() {
				if(_queryRS == null) return;
				var table = document.body.querySelector('.mui-table-view');
				var rows = document.body.querySelectorAll('.mui-table-view-cell');
					
				for(var i = 0; i < _queryRS.length; i++) {
					var li = dataToHtml(i, _queryRS[i]);
					table.appendChild(li);
				}

			}
			//不要用vue 不容易做出分页，
			function dataToHtml(i, rc) {
				//显示数据
				var li = document.createElement('li');
				li.className = 'mui-table-view-cell list-row ';
				li.did = rc._idkey;
				li.oldnum = rc.oldnum;
				var img = rc.gimg[0];
				//console.log(JSON.stringify(img));
				//	img = plus.io.convertLocalFileSystemURL(img);
				//console.log(img)
				rc['oldnum'] == undefined ? 0 : rc['oldnum'];		
				var num = rc['oldnum'];
				var html = '<a ><img  class=" mui-pull-left  list-img "  src="' + img.src + '"><div class="mui-media-body">'
				html += '<div class="mui-h4">[名称]' + rc.gname + '</div></p>'
				html += '<p><span class="mui-h4">[ID]' + rc._idkey + '</span></p>'
				html += '<span class="mui-h4 mui-pull-right">数量: ' + num + '</span>'
				html += '</div></a>'
				li.innerHTML = html;
				return li;
			}

			function queryList() {
				var q1 = _FF.getV('gclass');
				var q2 = _FF.getV('gname');
				var wheres = {
					"gclass": q1,
					"gname%": q2
				};

				return _tb_goods.where(wheres).getList();
			}

			function refresh() {
				var table = document.body.querySelector('.mui-table-view');
				table.innerHTML = '';
				var list1 = queryList();
				var list2 = _AW.select(_IOM.getCurmonStore(), "gid,num oldnum");
				//console.log(JSON.stringify(list2));
				_queryRS = _AW.leftjoin(list1, list2, "_idkey=gid");
				//console.log(JSON.stringify(_queryRS))
				pullRefresh();
				//mui('#offCanvasContentScroll').scroll().scrollTo(0, 0, 100);
				//console.log('dddd');
			}

			function afterPlusReady() {
				var self = _self;
				_opentype = self.target
				if(_opentype == 'sel') {
					document.body.querySelector('nav').style.display = 'none'
				}
				//提取数据	//if(self.id != null) 
				_tb_goods = new XCDBHelp('tb_goods')
				_tb_checknum = new XCDBHelp('tb_checknum')

				refresh();
				loaddict();
			}

			//配合扫描器 的回调函数
			function scaned(type, result, file) {
				//mydb.putV('gid', result);
				addOpera({
					id: result
				});
			}
		</script>
	</body>

</html>